<template>
  <form class="form-field" @submit="handleSubmit($event,form)">
    <div class="form-item" v-for="(item,v) in form" :key="item.id" :index="v">
      <div class="name" :style="{color:app_tabBar.config.firstcolor}">
        <div class="require" v-if="item.wr_ok==='1'">*</div>
        {{item.name}}
      </div>
      <input class="form-input" type="text" v-if="item.type==='1'" :name="'para'+item.id">
      <input class="form-input" @blur="inputNum" type="text" v-if="item.type==='8'" :name="'para'+item.id">
      <input class="form-input" @blur="inputEmail" type="text" v-if="item.type==='9'" :name="'para'+item.id">
      <div class="picker" v-if="item.type==='2'">
        <picker  @change="pickerChange($event,item)" :range="item.list" :value="item.index" range-key="value" :name="'para'+item.id">
          <div class="picked" :style="{color:app_tabBar.config.firstcolor}">{{item.list[item.index].value}}
            <i-icon type="unfold" size="14" />
          </div>
        </picker>
      </div>
      <radio-group class="radio-group" v-if="item.type==='6'" :name="'para'+item.id" :style="{color:app_tabBar.config.firstcolor}">
        <label class="radio" v-for="radio in item.list" :key="radio.id">
          <radio :value="radio.value" :color="app_tabBar.config.firstcolor" /> {{radio.value}}
        </label>
      </radio-group>
      <checkbox-group class="checkbox-group" v-if="item.type==='4'" :name="'para'+item.id" :style="{color:app_tabBar.config.firstcolor}">
        <label class="checkbox" v-for="check in item.list" :key="check.id">
          <checkbox :value="check.value" :color="app_tabBar.config.firstcolor" /> {{check.value}}
        </label>
      </checkbox-group>
      <textarea class="form-textarea" v-if="item.type==='3'" :name="'para'+item.id"></textarea>
    </div>
    <div class="form-item">
      <button formType="submit" class="form-btn" :style="{backgroundColor:app_tabBar.config.thirdcolor}">提交</button>
    </div>
    <i-message id="message" />
  </form>
</template>
<script>
import { mapGetters } from 'vuex'
const { $Message } = require('../../../static/iView/base/index')
import { validatePhoneNumber, validateEmail, validateForm } from '@/utils/index'
export default {
  components: {},
  props: {
    form: Array
  },
  mounted() {
    this.Message = $Message
  },
  computed: {
    ...mapGetters(['feedback', 'app_tabBar'])
  },
  data() {
    return {
      validate: false,
      Message: {}
    }
  },
  methods: {
    inputNum(e) {
      const value = e.mp.detail.value
      if (!validatePhoneNumber(value))
        this.Message({
          content: '请输入正确的电话号码',
          type: 'error'
        })
    },
    inputEmail(e) {
      const value = e.mp.detail.value
      if (!validateEmail(value))
        this.Message({
          content: '请输入正确的邮箱地址',
          type: 'error'
        })
    },
    pickerChange(e, item) {
     const val = item.list[e.mp.detail.value]
      item.index = e.mp.detail.value  
    },
    handleSubmit(e, form) {
      const value = e.mp.detail.value
      if (validateForm(form, value, this)) {
        wx.showLoading({
          title: '提交中'
        })
        value.module = form[0].module
        let funName
        if (value.module === '8') {
          value.column_id = this.feedback.column_id
          value.name = this.feedback.name
          funName = 'SubmitFeedback'
        } else {
          funName = 'SubmitMessage'
        }
        this.$store.dispatch(funName, value).then(response => {
          const title = response.data
          wx.showToast({
            title: title,
            icon: 'success',
            duration: 3000
          })
          setTimeout(() => {
          wx.switchTab({
            url: '../../pages/index/main'
          }) 
           wx.hideLoading()
          }, 3001);
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.form-field {
  .checkbox,
  .radio {
    margin-right: 15px;
  }
  ._checkbox,
  ._radio {
    margin-bottom: 15px;
  }
  .picker {
    .title {
      margin-bottom: 10px;
    }
    .picked {
      border: 1px solid #dcdcdc;
      color: #76838f;
      padding: 6px 15px;
      line-height: 1.571429;
      font-size: 14px;
      height: 40px;
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
  .require {
    color: #ed3f14;
  }
  .form-item {
    margin-bottom: 20px;
    .name {
      display: flex;
      margin-bottom: 10px;
      .require {
        color: #ed3f14;
        margin-right: 8px;
      }
    }
  }
}
</style>
